<template>
  <div>
    <a-spin :spinning="loading">
      <a-card :bordered="false" :bodyStyle="{padding:'16px', height: '100%'}">
        <div class="table-page-search-wrapper">
          <a-form layout="inline">
            <a-row :gutter="48">
              <a-col :md="8" :sm="24">
                <a-form-item label="上课老师:">
                  <a-select
                    placeholder="请选择老师"
                    style="width:80%;"
                    allowClear
                    v-model="queryParam.teacher_id"
                  >
                    <a-select-option
                      :value="item.id"
                      v-for="(item,index) in teacherList"
                      :key="index"
                    >{{item.name}}</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="24">
                <a-form-item label="所在班级:">
                  <a-select
                    placeholder="请选择班级"
                    style="width:80%;"
                    allowClear
                    v-model="queryParam.class_id"
                  >
                    <a-select-option
                      :value="item.id"
                      v-for="(item,index) in classList"
                      :key="index"
                    >{{item.name}}</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <!-- <a-col :md="8" :sm="24">
                <a-form-item label="备注:">
                  <a-select
                    placeholder="请根据备注搜索"
                    style="width:80%;"
                    allowClear
                    v-model="queryParam.score"
                  >
                    <a-select-option :value="1">1</a-select-option>
                    <a-select-option :value="2">2</a-select-option>
                    <a-select-option :value="3">3</a-select-option>
                    <a-select-option :value="4">4</a-select-option>
                    <a-select-option :value="5">5</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col> -->
              <template v-if="advanced">
                <a-col :md="8" :sm="24">
                  <a-form-item label="上课日期:">
                    <a-range-picker style="width:80%" @change="changeDate" />
                  </a-form-item>
                </a-col>
              </template>
            </a-row>
          </a-form>
        </div>
        <a style="cursor:pointer" v-if="advanced" @click="more" id="moreButton">
          收起
          <a-icon type="up"></a-icon>
        </a>
        <a style="cursor:pointer" v-if="!advanced" @click="more" id="moreButton">
          展开
          <a-icon type="down"></a-icon>
        </a>

        <div >
          <s-table
            ref="table"
            :columns="columns"
            :data="loadData"
            class="user_management_table"
            :pagination="pagination"
          >
            <div slot="score" slot-scope="text,record">
              <a @click="showModal(record.id)" v-if="record.score_obj&&record.score_obj.score">{{record.score_obj.score+'分'}}</a>
              <span v-else>-</span>
            </div>
          </s-table>
        </div>
      </a-card>
      <a-modal
        :title="'评价详情：'+modelTeacherName"
        :visible="visible"
        :confirm-loading="confirmLoading"
        :footer="null"
        @cancel="handleCancel"
      >
        <div class="t">
          <h4>{{allData.class_name||'--'}}</h4>
          <div class="date-info">
            <div class="name">{{allData.student.name||'--'}} 学员</div>
            <div class="date">评价时间：{{allData.created_at||'--'}}</div>
          </div>
        </div>
        <div class="t" v-if="allData.record">
          <div class="date-info">
            <div class="name" >
              <span
                style="margin-right: 15px;"
              >授课时间：{{allData.record.attend_class_day}} {{allData.record.start_time}} - {{allData.record.end_time}}</span>
            </div>
            <div
              class="date"
              v-if="allData.record.created_at"
            >点名时间：{{allData.record.created_at|dayjs}}</div>
          </div>
        </div>
        <div v-if="allData.score_obj.score">
          <a-rate :value="allData.score_obj.score" disabled class="point-stars-wrap" style="font-size:42px;" />
        </div>

        <div v-if="allData.comment">{{allData.comment[0].content}}</div>
        
      </a-modal>
    </a-spin>
  </div>
</template>

<script>
import { STable } from '@/components'
import { teacherCommentList, teacherDetails } from '@/api/afterClassComment'
import { teacherList } from '@/api/teacher'
import { classList } from '@/api/class'
export default {
  name: 'teacherCommentList',
  components: {
    STable
  },
  data() {
    return {
      pagination:{
        showTotal:total=>`共${total}条数据`,
      },
      advanced: false,
      loading: false,
      //搜索
      teacherList: undefined,
      classList: undefined,
      columns: [
        {
          title: '评价时间',
          dataIndex: 'created_at'
          //   scopedSlots: { customRender: 'name' }
        },
        {
          title: '老师',
          dataIndex: 'teacher.name'
          //   scopedSlots: { customRender: 'classtime' }
        },
        {
          title: '班级名称',
          dataIndex: 'class_name'
          //   scopedSlots: { customRender: 'teacher' }
        },
        {
          title: '学员姓名',
          dataIndex: 'student.name'
        },
        {
          title: '备注',
          scopedSlots: { customRender: 'score' }
        }
      ],

      queryParam: {
        school_id: this.$store.state.user.school,
        start_time: undefined,
        end_time: undefined
      },
      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
        return teacherCommentList(Object.assign(parameter, this.queryParam)).then(res => {
          return res
        })
      },
      selectedRowKeys: [],
      selectedRows: [],
      //对话框a-modal
      modelTeacherName:null,
      visible: false,
      confirmLoading: false,
      allData: {
        class_name: null,
        student: {
          name: null
        },
        record: {
          attend_class_day: null,
          start_time: null,
          end_time: null
        },
        score_obj:{
            score:null
        },
        created_at: null
      }
    }
  },
  watch: {
    queryParam: {
      handler(newName, oldName) {
        this.$refs.table.refresh()
      },
      //immediate:true代表如果在 wacth 里声明了obj之后，就会立即先去执行里面的handler方法，
      immediate: false,
      deep: true // 开启深度监听，默认是false
    }
  },
  created() {
    this.getTeacher()
    this.getClass()
  },
  methods: {
    //搜索  老师列表
    getTeacher() {
      teacherList({ school_id: this.$store.state.user.school, pageSize: 99999999 })
        .then(res => {
          this.teacherList = res.data
        })
        .catch(err => {
          this.$message.error(err.data.message || '上课老师获取失败')
        })
    },
    getClass() {
      classList({ school_id: this.$store.state.user.school, pageSize: 99999999 })
        .then(res => {
          this.classList = res.data
        })
        .catch(err => {
          this.$message.error(err.data.message || '班级获取失败')
        })
    },
    changeDate(date, dateString) {
      this.queryParam.start_time = dateString[0]
      this.queryParam.end_time = dateString[1]
    },
    more() {
      this.advanced = !this.advanced
    },
    //对话框
    showModal(id) {
      this.loading = true
      teacherDetails(id)
        .then(res => {
          this.allData = JSON.parse(JSON.stringify(res))
          this.modelTeacherName= this.allData.teacher.name
          this.visible = true
        })
        .finally(() => {
          this.loading = false
        })
        .catch(err => {
          this.$message.error(err.data.message || '获取详情数据失败')
        })
    },
    handleCancel(e) {
      this.visible = false
    }
  }
}
</script>

<style lang="less" scoped>
.t {
  padding-bottom: 5px;
  border-bottom: 1px solid rgb(232, 232, 232);
}
.date-info {
  color: rgb(102, 102, 102);
  margin-top: 10px;
  margin-bottom: 16px;
  line-height: 14px;
}
#moreButton {
  position: absolute;
  top: 24px;
  right: 20px;
}
.name {
  margin-bottom: 5px;
}
.date {
  margin-bottom: 5px;
}
.point-stars-wrap {
  text-align: center;
  display: flex;
  justify-content: space-between;
  margin: 15px 0px;
  padding: 0px 30px;
}
</style>